<template>
  <div>
    <h2>音乐</h2>
    <hr>

    <h3>音乐类型:{{type}}</h3>
    <h3>音乐时长:{{time}}</h3>
    <br>

    <button @click="songOne">歌曲1</button>
    <button @click="songTwo">歌曲2</button>
    <button @click="songThree">歌曲3</button>


    <div class="three">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {
    name: "Music",
    props: ["type" , "time"],
    methods:{
      songOne(){
        this.$router.push({
          name: "song",
          params:{
            id: '1'
          }
        })
      },

      songTwo(){
        this.$router.push({
          name: "song",
          params:{
            id: '2'
          }
        })
      },

      songThree(){
        this.$router.push({
          name: "song",
          params:{
            id: '3'
          }
        })
      }
    }
}
</script>

<style>
.three{
  margin: 20px;
  background-color: hotpink;
}
</style>